<template>
  <div class="main">
    <div class="top">
      <div class="wrap">
        <div class="box" v-for="(right, index) in vipRight" :key="index">
          <img :src="right.cover" class="image" />
          <div class="right_title">{{ right.title }}</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="use">
        <el-row :gutter="20">
          <el-col
            :span="4"
            :offset="use.offset"
            v-for="(use, index) in vipUseTop"
            :key="index"
            ><div class="cover"><img :src="use.cover" class="divcover" /><div class="grid-content ep-bg-purple" >{{ use.title }}</div></div>
            </el-col
          >
        </el-row>
        <el-row :gutter="20">
          <el-col
            :span="4"
            :offset="use.offset"
            v-for="(use, index) in vipUseBottom"
            :key="index"
            style="margin-top: 0px"
            ><div class="cover"><img :src="use.cover" class="divcover" /><div class="grid-content ep-bg-purple" >{{ use.title }}</div></div>
            </el-col
          >
        </el-row>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "index",
  data() {
    return {
      vipRight: [
        {
          cover: require("../../assets/img/SunsetCityofArtsandScience.png"),
          title: "音乐特权",
        },
        {
          cover: require("../../assets/img/SchwarzeAugen.png"),
          title: "付费歌曲特权",
        },
        {
          cover: require("../../assets/img/Simple.png"),
          title: "身份特权",
        },
        {
          cover: require("../../assets/img/plantonbrownceramicvase.png"),
          title: "生活特权",
        },
      ],
      vipUseTop: [
        {
          cover: require("../../assets/img/vip_music.png"),
          title: "高品质音乐试听",
          offset: 2,
        },
        {
          cover: require("../../assets/img/download.png"),
          title: "高品质音乐下载",
          offset: 1,
        },
        {
          cover: require("../../assets/img/upload_local.png"),
          title: "上传本地音乐",
          offset: 1,
        },
      ],
      vipUseBottom: [
        {
          cover: require("../../assets/img/share.png"),
          title: "高品质音乐分享",
          offset: 8,
        },
        {
          cover: require("../../assets/img/download.png"),
          title: "无损音乐下载",
          offset: 1,
        },
        {
          cover: require("../../assets/img/multi_theme.png"),
          title: "多种皮肤使用",
          offset: 1,
        },
      ],
    };
  },
};
</script>

<style scoped>
.wrap {
  width: 80%;
  margin: 0 auto;
  /* text-align: center; */
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  /*实现水平居中*/
  justify-content: center;
  text-align: justify;
}
.box {
  width: 230px;
  height: 300px;
  display: inline-block;
  padding: 50px 10px;
}
.image {
  height: 100%;
  width: 100%;
}
.top {
  width: 100%;
  height: 380px;
  background-color: #d9f6f8;
  margin-top: 60px;
}
.right_title {
  margin-top: -170px;
  position: absolute;
  text-align: center;
  width: 230px;
  color: white;
  font-size: 20px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  text-align: center;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin-top: 25px;
  color: #3d3d3d;
}
.main {
  width: 100%;
  height: 100%;
}
.bottom {
  height: 65%;
  background-color: #89c7d4;
}
.use {
  width: 1100px;
  margin: 0 auto;
}
.cover {
  border-radius: 100%;
  width: 120px;
  height: 120px;
  margin-top: 50px;
  z-index: -1;
  background-color: white;
}
.divcover {
  width: 80px;
  height: 80px;
  margin-top: 20px;
}
</style>